<template>
  <el-tabs v-model="activeName" @tab-click="clickTab" class="el-row wisplm-tab-container">
    <el-tab-pane v-for="(tabData, index) of tabDataList" v-bind:key="index" :label="tabData['title']"
                 :name="tabData['id']" class="">
      <template slot="default">
        <slot name="content">{{ tabData['content'] }}</slot>
      </template>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  name: "index",
  props: ['tabDataList', 'activeName'],

  data() {
    return {
      // tabDataList: [
      //   {
      //     title: 'Posts',
      //     content: 'Posts',
      //     id: 'Posts'
      //   },
      //   {
      //     title: 'About Me',
      //     content: 'About Me',
      //     id: 'About Me'
      //   },
      //   {
      //     title: 'Setting',
      //     content: 'Setting',
      //     id: 'Setting'
      //   },
      // ],
      // activeName: 'Posts'
    }
  },
  methods: {
    clickTab(tab) {
      console.log(tab);
      this.$emit('clickTab', tab)
    }
  }
}
</script>

<style scoped>
.wisplm-tab-container >>> .el-tabs__item:hover {
  color: green;
}

.wisplm-tab-container >>> .is-active {
  color: green;
}

.wisplm-tab-container >>> .el-tabs__active-bar {
  background-color: green;
}
</style>
